<template>
  <div>

	<myheader></myheader>
		
		<div id="carousel" class="carousel slide" data-ride="carousel">
	
			<!-- <ul class="carousel-indicators">
				<li data-target="#carousel" data-slide-to="0" class="active"></li>
				<li data-target="#carousel" data-slide-to="1"></li>
				<li data-target="#carousel" data-slide-to="2"></li>
			</ul> -->
	
			<div class="carousel-inner">
			
				<!--Text only with background image-->
				<!-- <div class="carousel-item active">
					<div class="container slide-textonly">
						<div>
							<h1>York &amp; Smith</h1>
							<p class="lead">Spring/Summer 2018 Collection</p>
							<a href="#" class="btn btn-outline-secondary">View Collection</a>
						</div>
					</div>
				</div> -->

				<!-- 幻灯片组件 -->
				<Carousel :height='700' :datas='params' pageTheme='circle' @click='click'>


				</Carousel>
				
			
			</div>
		</div>

		<section class="collections text-center ">
			<div class="container-fluid">
				<div class="row">
					<div class="collection col-md-6 alt-background">
						<div class="container container-right text-center">
							<div>
								<h1>Women's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-secondary">Browse Women's</a>
							</div>
						</div>
					</div>
					<div class="collection col-md-6 bg-secondary inverted">
						<div class="container container-left text-center">
							<div>
								<h1>Men's</h1>
								<p class="lead">Spring/Summer 2018 Collection</p>
								<a href="catalog.html" class="btn btn-outline-white">Browse Men's</a>
							</div>
						</div>
					</div>
				</div>
			</div>
	</section>
    
		<section class="featured-block text-center">

			<div class="container">
				<div class="row justify-center">	

				<!-- 商品排行榜 -->				
				<div v-bg-color:gray2
					v-width="400"
					v-padding="20">
					<div class="h-panel h-panel-no-border">
					  <div class="h-panel-bar">
						<span class="h-panel-title">商品排行榜</span>
					  </div>
					  <div class="h-panel-body" v-for="(goodrank, index) in goodrank_list" :key="index">
						<tr>
							<td>
									<p>{{ index+1 }}&nbsp;&nbsp;&nbsp;&nbsp;{{ goodrank.name | goodrank_color }}</p>
							</td>
						</tr>
					  </div>
					</div>
				  </div>

					<div class="col-md-6 text-center">
						<img class="mt-4 mb-4 img-fluid" src="../assets/images/placeholder-jacket.png" style="width: 100%;">
					</div>
					<div class="col-md-6 text-center text-md-left">
						<h2 class="mb-3">Spring/Summer Collection 2018</h2>
						<p class="lead mt-2 mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse cursus erat sed sem sagittis cursus.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
						<a href="#" class="btn btn-md btn-outline-primary mt-3">Shop Now</a>
					</div>
				</div>
			</div>
		</section>
		
		<section class="products text-center">

			<div class="container">
				<h3 class="mb-4">商品展示</h3>

				<div class="row">
					<!-- 遍历商品列表 -->

					<div v-for="(item, index) in datalist" :key="index" class="col-sm-6 col-md-3 col-product">
						<figure>
							<a :href="'/item/?id='+item.id">
								<img class="rounded-corners img-fluid" 
								:src="'http://localhost:8000/static/upload/'
								+item.img+''" 
								width="240" height="240">
							</a>
							<figcaption>
								<div class="thumb-overlay"><a href="'/item/?id='+item.id" title="More Info">
									<i class="fas fa-search-plus"></i>
								</a></div>
							</figcaption>
						</figure>

						<h4><a :href="'/item/?id='+item.id+'&count_num='+count_num" @click="get_count_num">{{ item.name }}</a></h4>

						<!-- <h4><a :href="'/item/?id='+item.id" >{{ item.name }}</a></h4> -->
						<h4>
							<a :href="'/editgood/?id='+item.id" v-if="the_admin == true">修改商品</a>
						</h4>
						<p><span class="emphasis">${{ item.price }}</span></p>
					</div>

					<div style="clear: both;"></div>



				</div>

				<div>
					<!-- 分页逻辑 -->
					<!-- 引入样式实现 -->
					<br>
					<div>
											
						<!-- <Pagination v-model="pagination" @change='change' layout="pager,jumper" >
					
						</Pagination>	 -->

						<Pagination v-model="pagination" @change='change'>
					
						</Pagination>	
					
					</div>
					<br>

					<!-- 手写实现自主分页 -->
					<!-- <div>
						<Button v-show="lastpage" @click="getdata(lastpage)">上一页</Button>
						
						<ul>
							
							<li v-for="index in all">
								<Button href="" @click="getdata(index)">{{ index }}</Button>
							</li>
						</ul>

						<Button @click="getdata(nextpage)">下一页</Button>

					</div> -->

				</div>

			</div>
		</section>
		
		<div class="divider"></div>
		
		<section class="cta text-center">
			<div class="container">
				<h3 class="mt-0 mb-4">Sign up now to save 10% on your first order</h3>
				<form class="subscribe">
					<div class="form-group row pt-3">
						<div class="col-sm-8 mb-3">
							<input type="text" class="form-control" id="inputName" placeholder="Your Name">
						</div>
						<div class="col-sm-4">
							<button type="submit" class="btn btn-lg btn-outline-primary">Sign me up</button>
						</div>
					</div>
				</form>
			</div>
		</section>
		
		<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>


//导包
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

  
import {config,formatXml} from '../config.js'


export default {
  data () {
    return {

	value: [0],
	  msg: "这是一个变量",

	  //自主分页
	  total:0,	//商品总数
	  cur:1,	//当前页
	  all:0,	//总页数
	  lastpage:0,	//上一页
	  nextpage:0,	//下一页
	  size:2,	//一页显示几个

	  //幻灯片数据
	  params:[
		{
			title:'第一张',
			link:'http://www.baidu.com',
			image:'https://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg',
			// image:this.pics_1,

		},
		{
			title:'第二张',
			link:'http://www.baidu.com',
			image:'https://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg',
			// image:this.pics_2,
		},

	  ],

	  datalist:[],

		//heyui分页器变量
	  pagination:{
		  page:1,
		  size:4,
		  total:13,
	  },

	  //商品点击数量变量
	  count_num:'',

	  //身份判定
	  the_admin:'',

	  goodrank_list:[],


    }
  },
  mounted:function(){

	//获取幻灯片信息
	this.axios.get(config['after_end'] + '/picslist/').then((result)=>{

	//打印接口返回值
	console.log(result)
	// this.pics_1 = result.data.data[0].img;
	// this.pics_2 = result.data.data[1].img;
	//声明变量
	var mylist = result.data;
	var datalist = [];
	//遍历
	for (let i=0,I=mylist.length;i<I;i++){
		datalist.push({title:mylist[i]['title'],ling:mylist[i]['link'],image:mylist[i]['img']}) 
	
	}

	this.params = datalist;

	})

	//请求商品接口
	this.axios.get(config['after_end'] + '/goodslist/',{params:{page:1,size:4}
			}).then((result)=>{
				//打印接口返回值
				console.log(result)
				//向用户提醒后端制定的message
				// this.$Message(result.data.message)
				//给列表赋值
				this.datalist = result.data.data;
  
			})
   
   //调用自主分页接口(手写分页)
	// this.getdata()
   
   //判定用户身份
   this.admin()

	//获取count_num数值
	this.num()

	//获取排行榜数据
	this.get_goodrank()

	},

	filters:{
		goodrank_color:function(value){

			if (value){

				return value

			}else{
				return value

			}

		},
	},

	//注册组件标签
	components:{
		'myheader': myheader,
		'myfooter': myfooter,

  },
  methods:{
	//幻灯片点击事件
	click:function(index,data){
		console.log(data);

		//点击后跳转具体页面
		window.location.href = data.link;

	},

	change:function(){

		this.axios.get(config['after_end'] + '/goodslist/',{params:{page:this.pagination.page,size:this.pagination.size,total:this.pagination.total}
			}).then((result)=>{
				//打印接口返回值
				console.log(result)
				//向用户提醒后端制定的message
				// this.$Message(result.data.message)
				//给列表赋值
				this.datalist = result.data.data;
  
			})

	},

	//自主分页接口
	getdata:function(mypage){
		this.axios.get(config['after_end'] + '/goodslist/',{params:{page:mypage,size:this.size,}
			}).then((result)=>{
				//打印接口返回值
				console.log(result)
				//向用户提醒后端制定的message
				// this.$Message(result.data.message)
				//给列表赋值
				this.datalist = result.data.data;

				//手写分页判断上一页/下一页
				//判断上一页
				if(mypage==1){
					this.lastpage = 0;

				}else{
					this.lastpage = mypage - 1;

				}

				//计算总页数
				this.all = Math.ceil(result.data.total / this.size);

				//判断下一页
				if(mypage==this.all){
					this.nextpage = 0;

				}else{
					this.nextpage = mypage + 1;

				}
  
			})

	},

	//管理员身份判定
	admin:function(){
            this.axios.get(config['after_end'] + '/getusertype/',{params:{uid:localStorage.getItem('uid')}})
		    .then((result)=>{
			    // console.log(result);
                this.u_type = result.data.u_type;
                
                // this.$Message(this.u_type);

                if(this.u_type == 1){
                    this.the_admin = true;
                }else{
                    this.the_admin = false;
                }

		    })

	    },


	//封装获取商品点击量函数
	num:function(){
		this.axios.get(config['after_end'] + '/getnum/')
			.then((result)=>{
			// alert(result.data.num);
			// alert(result.data.count);
			// alert(result.data.count_list);
			this.count_num = result.data.count;
		})

	},

	//点击路由跳转时计数加一
	get_count_num:function(){
		this.axios.get(config['after_end'] + '/goodsnum/',{params:{count_num:this.count_num}})
			.then((result)=>{
			this.count_num = result.data.count;
		})

	},


	//获取商品排行榜信息
	get_goodrank:function(){
		this.axios.get(config['after_end'] + '/goodrank/')
			.then((result)=>{
			this.goodrank_list = result.data;

		})

	},

     
  }
}


</script>
 
<style>



</style>